<template>
  <div >
    <div style="background-color:#fff;padding:10px 20px;">
      <span style="line-height:60px;font-size:26px; font-weight: bold">我的订单详情</span>
    </div>
    <el-card style="margin: 20px;">
      <el-form style="padding-top:10px;">
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item label="分店选择" style="width:250px;">
              <el-select placeholder="请选择所属分店" v-model="searchForm.branchId" @change="loadMyOrders">
                <el-option v-for="item in branchOptions"
                           :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单状态">
              <el-select placeholder="请选择" v-model="searchForm.status" @change="loadMyOrders">
                <!--              <el-option v-for="item in appOptions" :label="item.label" :value="item.value"></el-option>-->
                <el-option label="未付款" value="0"></el-option>
                <el-option label="已付款" value="1"></el-option>
                <el-option label="已选餐桌" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button @click="resetSearch">重置</el-button>
              <el-button type="primary" @click="loadMyOrders">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin: 20px;">
      <el-table :data="myOrders" style="margin: 20px;">
        <el-table-column type="index" width="80" align="center" prop="id" label="订单编号"></el-table-column>
        <el-table-column align="center" prop="branchId" label="餐厅名称" :formatter="formatRoleTable"></el-table-column>
        <el-table-column align="center" prop="tableId" label="餐桌" :formatter="formatTableTable"></el-table-column>
        <el-table-column align="center" prop="status" label="订单状态" :formatter="orderStatus"></el-table-column>
        <el-table-column align="center" prop="total" label="订单金额"></el-table-column>
        <el-table-column align="center" prop="remark" label="订单备注"></el-table-column>
        <el-table-column align="center" prop="createTime" label="下单时间"></el-table-column>
        <el-table-column align="center" prop="paymentAmount" label="支付金额"></el-table-column>
        <el-table-column align="center" :formatter="payName" prop="paymentType" label="支付方式"></el-table-column>
        <el-table-column align="center" prop="paymentTime" label="支付时间"></el-table-column>
        <el-table-column align="center" label="操作">
  <!--        当订单状态为已付款时显示查看详情，和去评论按钮-->
          <template #default="scope">
            <el-button v-if="scope.row.status==='1'" type="success" size="small" @click="toComment(scope.row)">去评论</el-button>
            <el-button v-else-if="scope.row.status==='2'" type="danger" link :disabled="true" >选餐中...</el-button>
            <el-button v-else type="primary" size="small" @click="lookOrderDetail(scope.row.id)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

<!--    订单详情弹窗-->
    <el-dialog v-model="orderDetailDialogVisible" title="订单详情" width="50%">
      <el-table :data="orderDetails" stripe style="width: 100%" >
        <el-table-column type="index" width="80" align="center" prop="id" label="订单详情编号"></el-table-column>
        <el-table-column align="center" prop="dish" label="菜品名称" width="180"></el-table-column>
        <el-table-column align="center" label="数量" width="180">
          <template #default="scope">
            x{{ scope.row.number }} 份
          </template>
        </el-table-column>
        <el-table-column align="center" label="单价" width="180">
          <template #default="scope">
            {{ scope.row.price }} 元
          </template>
        </el-table-column>
        <el-table-column align="center" prop="cuisine" label="菜系" :formatter="dishTypeFormatter"></el-table-column>
      </el-table>
    </el-dialog>

<!--    顾客评论弹窗-->
    <el-dialog v-model="commentDialogVisible" title="填写评论" width="50%">
      <el-form label-width="100px">
        <el-form-item label="五星好评">
          <el-rate v-model="commentForm.score" :max="5" show-score></el-rate>
        </el-form-item>
        <el-form-item label="评论内容">
          <el-input v-model="commentForm.content" type="textarea" placeholder="请输入评论内容" maxlength="50" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeCommentDialog">取 消</el-button>
          <el-button type="primary" @click="submitComment">提 交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
// 获取我的个人订单
const myOrders = ref([]);
// 获取当前登录用户的个人信息
const user= ref(getUser());
// 定义查询条件对象
const searchForm = ref({
  branchId:'',
  userId:user.value.id,// 当前登录用户的id
  status:''
})
// 定义重置查询条件的方法
const resetSearch = () => {
  searchForm.value.branchId = '';
  searchForm.value.status = '';
  loadMyOrders();
}


// 获取我的订单
const loadMyOrders = () => {
  // 转化查询字符串
  let data = qs.stringify(searchForm.value);
  axios.get(BASE_URL+'/v1/orders/select?'+data).then((response)=>{
    if(response.data.code===2000){
      myOrders.value=response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

// 评论弹窗显示与隐藏
const commentDialogVisible = ref(false);
// 定义存储评论表单的数据
const commentForm = ref({
  userId:user.value.id,
  username:user.value.username,
  ordersId:'',
  branchId:'',
  score:'1',
  content:''
})
// 定义去评论的方法
const toComment = (row) => {
  commentDialogVisible.value = true;
  commentForm.value.ordersId = row.id;
  commentForm.value.branchId = row.branchId;

}
// 定义取消评论的方法
const closeCommentDialog = () => {
  if(confirm('确定取消评论吗？')){
    commentDialogVisible.value = false;
    commentForm.value.content = '';
    commentForm.value.score = '1';
  }
}
// 定义提交评论的方法
const submitComment = () => {
  // 评论内容不能为空，如果为空提示“请留下您的宝贵建议和评论”
  if(!commentForm.value.content){
    ElMessage.warning('请留下您的宝贵建议和评论');
    return;
  }
  let data = qs.stringify(commentForm.value);
  axios.post(BASE_URL+'/v1/comment/save',data).then((response)=>{
    if(response.data.code===2000){
      ElMessage.success('评论成功');
      // 关闭评论弹窗
      commentDialogVisible.value = false;
      commentForm.value.content = '';
      commentForm.value.score = '1';
      // 重新加载我的订单
      loadMyOrders();
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}


// 定义存储订单详情的数组
const orderDetails = ref([]);
// 定义控制订单详情弹窗的显示与隐藏
const orderDetailDialogVisible = ref(false);
// 定义菜系的格式化的数组
const dishTypeOptions = ref([]);
// 定义菜系的格式化方法
const dishTypeFormatter=(row,column,cellValue,index)=>{
  if(!dishTypeOptions.value){
    return cellValue;
  }
  for(let item of dishTypeOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
}
// 定义查看订单详情的方法
const lookOrderDetail = (orderId) => {
  // 设置弹窗可见
  orderDetailDialogVisible.value = true;
  // 定义获取订单详情的方法
  axios.get(BASE_URL+'/v1/orderDetail/selectDish?id='+orderId).then((response)=>{
    if(response.data.code===2000){
      orderDetails.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })

}
// 定义订单状态的显示
const orderStatus = (row,column,cellValue,index)=>{
  switch (cellValue) {
    case '0':
      cellValue = '未付款';
      break;
    case '1':
      cellValue = '已付款';
      break;
    case '2':
      cellValue = '已选餐桌';
      break;
    case '3':
      cellValue = '已评论';
      break;
  }
  return cellValue;
}

// 加载数据
onMounted(
    ()=>{
      loadMyOrders();
      getBranchs(branchOptions);
      getTables(tableOptions);
      getCookingTypes(dishTypeOptions);
    }
)
// 定义保存餐厅数据的数组
const branchOptions = ref([]);
// 通过id显示餐厅的对应显示名称
const formatRoleTable = (row,column,cellValue,index)=>{
  if(!branchOptions.value){
    return cellValue;
  }
  for(let item of branchOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
};

//定义方法用来维护支付方式的显示
const payName = (row,column,cellValue,index)=> {
  switch (cellValue) {
    case '0':
      cellValue = '现金';
      break;
    case '2':
      cellValue = '微信';
      break;
    case '1':
      cellValue = '支付宝';
  }
  return cellValue;
}
// 定义保存餐桌数据的数组
const tableOptions = ref([]);
// 通过id显示餐桌的对应显示名称
const formatTableTable = (row,column,cellValue,index) => {
  if(!tableOptions.value){
    return cellValue;
  }
  for(let item of tableOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
}

</script>

<style scoped>

</style>